<!--
 * @Author: your name
 * @Date: 2020-10-10 17:10:32
 * @LastEditTime: 2020-10-10 17:44:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\video\vueDplayer.vue
-->
<template>
    <div class="contianer">
        <van-nav-bar
            title="视频播放器"
            :border="false"
            fixed
            left-arrow
            @click-left="$router.go('-1')"
        />
        <d-player :options="options" ref="player" @play="play"> </d-player>
    </div>
</template>

<script>
import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";

export default {
    components: {
        "d-player": VueDPlayer,
    },
    data() {
        return {
            options: {
                video: {
                    url: "http://static.smartisanos.cn/common/video/t1-ui.mp4",
                    pic:
                        "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg",
                },
                autoplay: false,
                contextmenu: [
                    {
                        text: "GitHub",
                        link: "https://github.com/MoePlayer/vue-dplayer",
                    },
                ],
            },
            player: null,
        };
    },
    mounted() {
        this.player = this.$refs.player.dp;
    },
    methods: {
        play() {
            console.log("play callback");
        },
        switchHandle() {
            this.player.switchVideo({
                url:
                    "http://static.smartisanos.cn/common/video/video-jgpro.mp4",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.contianer{
    padding-top: 100px;
}
</style>